<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Block - UIkit tests</title>

        <script src="../_test.js"></script>
    </head>

    <body>

        <div class="uk-block uk-block-default">
            <div class="uk-container uk-container-center">

                <h1>Block Default</h1>

                <div class="uk-grid uk-grid-match" data-uk-grid-margin>
                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="uk-block uk-block-muted">
            <div class="uk-container uk-container-center">

                <h1>Block Muted</h1>

                <div class="uk-grid uk-grid-match" data-uk-grid-margin>
                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="uk-block uk-block-primary uk-block-large uk-contrast">
            <div class="uk-container uk-container-center">

                <h1>Block Primary + Large</h1>

                <div class="uk-grid uk-grid-match" data-uk-grid-margin>
                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="uk-block uk-block-secondary uk-block-large uk-contrast">
            <div class="uk-container uk-container-center">

                <h1>Block Secondary + Large</h1>

                <div class="uk-grid uk-grid-match" data-uk-grid-margin>
                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                    <div class="uk-width-medium-1-3">
                        <div class="uk-panel">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <div class="uk-block uk-block-default">
            <div class="uk-container uk-container-center">

                <h1>Block Default</h1>

            </div>
        </div>

        <div class="uk-block uk-block-default">
            <div class="uk-container uk-container-center">

                <h1>Block Default</h1>

            </div>
        </div>

        <div class="uk-block uk-block-muted">
            <div class="uk-container uk-container-center">

                <h1>Block Muted</h1>

            </div>
        </div>

        <div class="uk-block uk-block-muted">
            <div class="uk-container uk-container-center">

                <h1>Block Muted</h1>

            </div>
        </div>

        <div class="uk-block uk-block-primary uk-block-large uk-contrast">
            <div class="uk-container uk-container-center">

                <h1>Block Primary + Large</h1>

            </div>
        </div>

        <div class="uk-block uk-block-primary uk-block-large uk-contrast">
            <div class="uk-container uk-container-center">

                <h1>Block Primary + Large</h1>

            </div>
        </div>

        <div class="uk-block uk-block-secondary uk-block-large uk-contrast">
            <div class="uk-container uk-container-center">

                <h1>Block Secondary + Large</h1>

            </div>
        </div>

        <div class="uk-block uk-block-secondary uk-block-large uk-contrast">
            <div class="uk-container uk-container-center">

                <h1>Block Secondary + Large</h1>

            </div>
        </div>

        <div class="uk-block uk-block-default uk-padding-vertical-remove">
            <div class="uk-container uk-container-center">

                <h1>Padding Remove</h1>

            </div>
        </div>

    </body>
</html>